<template>
	<view class="content">
<canvas class="facecat" id="myCanvas" canvas-id="myCanvas" style="width:100%;height:2000rpx;" @touchstart="touchStartCanvas" @touchmove="touchMoveCanvas" @touchend="touchEndCanvas"/>
	</view>
</template>
<script>
	import facecat from './facecat.js';
	import facecat_uni from './facecat_uni.js';
	let gPaint = new facecat.FCPaint();
		
	export default { 
		data() {
			return {
				widthEle : 0, 
				heightEle: 0
			}
		},
		onLoad() {
		}, 
		mounted(){
				const canvas = document.querySelector('#myCanvas');
				gPaint.isMobile = facecat.isMobileMode();
				//注册事件
				facecat.addDefaultEvent(canvas, gPaint);
				uni.getSystemInfo({
				  success: (res) => {
					this.widthEle = res.windowWidth;
					this.heightEle = res.windowHeight;
				  }
				});
				this.windowResizeCallback = (res) => {
				 	try {
				 		this.widthEle = res.size.windowWidth;
				 		this.heightEle = res.size.windowHeight;
				 		const canvas = document.querySelector('#myCanvas');
				 		canvas.width = this.widthEle;
				 		canvas.height = this.heightEle;
				 		facecat.updateViewDefault(gPaint.views);
				 	} catch (err) {
				 	}
				 	facecat.invalidate(gPaint);
				};
				canvas.width = this.widthEle;
				canvas.height = this.heightEle;
				gPaint.canvas = canvas;
				gPaint.container = this;
				//解析加载XML
				let xml = `<?xml version="1.0" encoding="utf-8"?>
				<html xmlns="facecat">
				  <head>
				  </head>
				  <body>
					<div dock="fill" type="tab" selectedindex="0">
					  <div name="TabPage" text="可视化生成" type="tabpage">
						<div type="tab" name="TabView" text="TabView" location="27,18" size="397,268" selectedindex="0">
						  <div name="TabPage3" text="TabPage3" type="tabpage">
							<input type="button" name="Button" text="Button" location="27,47" size="100,20" />
							<input type="button" name="Button2" text="Button2" location="27,103" size="100,20" />
						  </div>
						  <div name="TabPage4" text="TabPage4" type="tabpage">
							<table name="Grid" text="Grid" location="22,22" size="200,200">
							  <tr>
								<th name="FCGridColumn" text="FCGridColumn">FCGridColumn</th>
								<th name="FCGridColumn2" text="FCGridColumn2">FCGridColumn2</th>
							  </tr>
							  <tr>
								<td>Cell1</td>
								<td>Cell2</td>
							  </tr>
							</table>
						  </div>
						  <div name="TabPage5" text="TabPage5" type="tabpage" />
						  <div name="TabPage6" text="TabPage6" type="tabpage" />
						  <div name="TabPage7" text="TabPage7" type="tabpage" />
						</div>
					  </div>
					  <div name="TabPage2" text="代码创建" type="tabpage" />
					</div>
				  </body>
				</html>`;
				facecat.renderFaceCat(gPaint, xml);
				//获取第二页
				let tabPage = facecat.findViewByName("TabPage2", gPaint.views);
				let tabView2 = new facecat.FCTabView();
				tabView2.borderColor = "rgb(150,150,150)";
				tabView2.location = new facecat.FCPoint(50, 50);
				tabView2.size = new facecat.FCSize(400, 300);
				facecat.addViewToParent(tabView2, tabPage);
				for (let i = 0; i < 4; i++) {
					let newTabPage = new facecat.FCTabPage();
					newTabPage.borderColor = "rgb(150,150,150)";
					let tabButton = new facecat.FCView();
					tabButton.size = new facecat.FCSize(100, 20);
                    tabButton.viewType = "tabbutton";
					tabButton.text = "选项" + i;
					tabButton.backColor = "rgb(255,255,255)";
					tabButton.textColor = "rgb(0,0,0)";
					tabButton.borderColor = "rgb(150,150,150)";
					facecat.addTabPage(tabView2, newTabPage, tabButton);
				}
				facecat.updateTabLayout(tabView2);
		},
		methods: {  
		}
	}
</script>

<style>
</style>
